import QtQuick 2.6

import "../Base/Config"
import "../Base/UiBase"
import "../Base/UiBase/TC" as TC

Rectangle {
    id: root
    color: Color.background
    property alias backButton: backButton
    property alias uploadMask: uploadMask
    property alias changeHeadImageButton: changeHeadImageButton
    property alias headImage: headImage
    property alias okButton: okButton
    property alias nicknameInput: nicknameInput
    Column {
        width: parent.width
        spacing: 0
        Rectangle {
            id: rectangle1
            width: parent.width
            height: 96 * Size.ratio
            color: Color.main
            MouseArea {
                id: backButton
                width: 120 * Size.ratio
                height: parent.height
                SvgzImage {
                    anchors.centerIn: parent
                    width: 80 * Size.ratio
                    height: 80 * Size.ratio
                    source: parent.pressed ? "../../resources/communication/fanhiu02.svg" : "../../resources/communication/fanhiu01.svg"
                }
            }

            Text {
                anchors.centerIn: parent
                text: qsTr("基本资料")
                font.pixelSize: Size.titleFont
                color: Color.foreground
                horizontalAlignment: Text.AlignHCenter
            }
            BottomDivider {
            }
        }
        Column {
            width: parent.width
            spacing: Size.elementInterval
            Column {
                width: parent.width
                spacing: 0
                Rectangle {
                    width: parent.width
                    height: 200 * Size.ratio
                    color: Color.foreground
                    Text {
                        x: 60 * Size.ratio
                        text: qsTr("头像")
                        anchors.verticalCenter: parent.verticalCenter
                        font.pixelSize: Size.titleFont
                    }

                    MouseArea {
                        width: 200 * Size.ratio
                        height: 200 * Size.ratio
                        anchors.right: parent.right
                        anchors.rightMargin: 60 * Size.ratio
                        anchors.verticalCenter: parent.verticalCenter
                        id: changeHeadImageButton
                        HeadHolder {
                            SvgzImage {
                                id: headImage
                                width: 200 * Size.ratio
                                height: 200 * Size.ratio
                                source: "../../resources/tests/Beautiful Notebook.PNG"
                            }
                        }

                        ProgressMask {
                            id: uploadMask
                            anchors.fill: parent
                        }
                    }

                    BottomDivider {
                    }
                }
                Rectangle {
                    width: parent.width
                    height: 100 * Size.ratio
                    color: Color.foreground
                    Text {
                        x: 60 * Size.ratio
                        anchors.verticalCenter: parent.verticalCenter

                        text: qsTr("昵称")
                        font.pixelSize: Size.titleFont
                    }
                    TC.TextInput {
                        id: nicknameInput
                        x: parent.width * .3
                        width: parent.width - x
                        height: parent.height

                        horizontalAlignment: Text.AlignHCenter
                        verticalAlignment: Text.AlignVCenter
                        validator: RegExpValidator {
                            regExp: /.{2,10}/
                        }

                        font.pixelSize: Size.titleFont
                        Text {
                            anchors.fill: parent
                            visible: parent.text === ""
                            horizontalAlignment: Text.AlignHCenter
                            verticalAlignment: Text.AlignVCenter

                            text: qsTr("点击修改")
                            font.pointSize: 20
                            color: Color.virtualInput
                        }
                    }

                    BottomDivider {
                    }
                }
            }
            Column {
                width: parent.width
                spacing: 0
            }
        }
        Item {
            width: parent.width
            height: 85 * Size.ratio
        }
        MouseArea {
            id: okButton
            anchors.horizontalCenter: parent.horizontalCenter
            width: 520 * Size.ratio
            height: 100 * Size.ratio

            Rectangle {
                anchors.fill: parent
                color: Color.main
                radius: 20 * Size.ratio
            }

            Text {
                anchors.centerIn: parent
                font.pixelSize: Size.superLargeFont
                text: qsTr("确认")
            }
        }
    }
}
